<template>
  <div class="container">
    <bkContainer :margin="0">
      <bkRow>
        <bkCol :span="12">
          <bkForm ref="formRef" :model="formModel" :label-width="100">
            <bkFormItem v-show="!isUpdate" label="昵称">
              <bkInput v-model="formModel.nick_name"/>
            </bkFormItem>

            <bkFormItem label="学号">
              <bkInput :disabled="isUpdate" v-model="formModel.student_id"/>
            </bkFormItem>
            <bkFormItem v-show="isUpdate" label="QQ">
              <bkInput v-model="formModel.qq_number"/>
            </bkFormItem>
            <bkFormItem v-show="isUpdate" label="微信">
              <bkInput v-model="formModel.wechat_number"/>
            </bkFormItem>
            <bkFormItem v-show="isUpdate" label="是否对外展示个人信息" required>
              <bkRadioGroup v-model="formModel.visible_information">
                <bkRadio class="mr20" value="1">是</bkRadio>
                <bkRadio value="2">否</bkRadio>
              </bkRadioGroup>
            </bkFormItem>
            <bkFormItem v-show="isUpdate" label="个性签名">
              <bkInput type="textarea" v-model="formModel.personal_signature"/>
            </bkFormItem>

            <bkFormItem>
              <bkButton class="mr10" theme="primary" @click="submitData">提交</bkButton>
              <bkButton>取消</bkButton>
            </bkFormItem>
          </bkForm>
        </bkCol>
      </bkRow>
    </bkContainer>
  </div>
</template>

<script setup>
import {
  bkContainer,
  bkRow,
  bkCol,
  bkForm,
  bkFormItem,
  bkInput,
  bkRadioGroup,
  bkRadio,
  bkDatePicker,
  bkButton,
  bkUpload,
} from "bk-magic-vue";
import {ref, onMounted} from "vue";
import axios from "axios";
import router from "@/router";

const isUpdate = ref(false)
const formRef = ref();
const generateFormModel = () => {
  return {
    nick_name: "",
    student_id: "",
    qq_number: '',
    wechat_number: "",
    visible_information: '',
    personal_signature: ''
  }
};
const formModel = ref(generateFormModel());
const register = () => {
  formRef.value.validate().then(
      () => {
        let postData = {nick_name: formModel.value.nick_name.toString(), student_id: Number(formModel.value.student_id)}
        axios.post('/create_user/', postData).then(
            (res) => {
              console.log(res.data)
              alert("登录成功")
              localStorage.setItem("user", postData.student_id.toString())
              router.push({name: "Home"})
              isUpdate.value = true

            }
        ).catch(
            err => {
              console.log(err)
              alert("登录失败")
            }
        )
      }
  )

}
const update = () => {
  formRef.value.validate().then(
      () => {
        let postData = {
          qq_number: formModel.value.qq_number.toString(),
          wechat_number: formModel.value.wechat_number.toString(),
          visible_information: formModel.value.visible_information == 1,
          personal_signature: formModel.value.personal_signature.toString(),
        }
        let student_id = Number(formModel.value.student_id)
        console.log(postData)
        axios.put('/update_user_info/?student_id=' + student_id, postData).then(
            (res) => {
              console.log(res.data)
              if (res.data.result) {

                alert("修改成功")
              } else throw "err"
            }
        ).catch(
            err => {
              console.log(err)
              alert("修改失败")
            }
        )
      }
  )
}
const submitData = () => {
  if (!isUpdate.value) {
    register()
  } else {
    update()
  }
}

onMounted(() => {
  let isLogin = localStorage.getItem("user")
  console.log(isLogin)
  if (isLogin != null) {
    isUpdate.value = true
    formModel.value.student_id = isLogin
  } else {
    isUpdate.value = false

  }
})
</script>
